<template>
  <div class="messageContainer">
    <el-button
      icon="el-icon-plus"
      type="primary"
      plain
      size="mini"
      @click="showAddDialog"
      style="margin-bottom: 10px"
      >新增</el-button
    >
    <el-table
      :data="tableData"
      style="width: 100%"
      border
      stripe
      :max-height="maxheight"
    >
      <el-table-column prop="notice_content" label="通知内容" fixed>
        <template slot-scope="scope">
          <div
            style="
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            "
          >
            {{ scope.row.notice_content }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="notice_desc" label="通知说明">
        <template slot-scope="scope">
          <div
            style="
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            "
          >
            {{ scope.row.notice_desc }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="70">
        <template slot-scope="scope">
          {{
            scope.row.status === "0"
              ? "草稿"
              : scope.row.status === "1"
              ? "启用"
              : "禁用"
          }}
        </template>
      </el-table-column>
      <el-table-column prop="notice_type" label="通知频率" width="100">
        <template slot-scope="scope">
          {{
            scope.row.notice_type === "0"
              ? "立即通知"
              : scope.row.notice_type === "1"
              ? "定时通知"
              : "周期通知"
          }}
        </template>
      </el-table-column>
      <el-table-column prop="notice_time" label="通知时间" width="150">
        <template slot-scope="scope">
          {{
            scope.row.notice_type === "2"
              ? (scope.row.cycle_type === "1"
                  ? "每日"
                  : scope.row.cycle_type === "2"
                  ? "每周" + scope.row.cycle_number
                  : scope.row.cycle_type === "3"
                  ? "每月" + scope.row.cycle_number + "号"
                  : "") +
                " " +
                scope.row.hour +
                "时" +
                scope.row.minute +
                "分"
              : scope.row.notice_time !== "0"
              ? new Date(Number(scope.row.notice_time) * 1000)
                  .toLocaleString()
                  .replace(/:\d{1,2}$/, " ")
              : ""
          }}
        </template></el-table-column
      >
      <el-table-column prop="notice_role" label="通知角色" width="70">
        <template slot-scope="scope">
          {{
            scope.row.notice_role === "1"
              ? "角色"
              : scope.row.notice_role === "2"
              ? "收货人"
              : scope.row.notice_role === "3"
              ? "发货人"
              : scope.row.notice_role === "4"
              ? "账号"
              : scope.row.notice_role === "5"
              ? "特定人员"
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column prop="notice_method" label="通知方式">
        <template slot-scope="scope">
          {{
            scope.row.notice_method
              ? scope.row.notice_method
                  .split(",")
                  .map((item) => noticeMethods[item * 1 - 1].name) + ""
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="120">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="showDetailDialog(scope.row)"
            >详情</el-button
          >
          <el-button type="text" size="small" @click="showEditDialog(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="operation">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <div>
      <createMessageRule
        :drawerVisible="drawerVisible"
        :drawerType="drawerType"
        :id="id"
      >
        <!-- 表单内容 -->
      </createMessageRule>
    </div>
  </div>
</template>

<script>
import { reqMessageRulesList } from "@/api/companymanagement";
import createMessageRule from "./components/createMessageRule.vue";

export default {
  name: "messageNotification",
  components: { createMessageRule },
  data() {
    return {
      maxheight: "auto",
      tableData: [],
      currentPage: 1,
      pageSize: 20,
      total: 0,
      drawerVisible: false,
      drawerType: "", //新增还是编辑还是详情
      noticeMethods: [
        { id: "1", name: "站内信" },
        { id: "2", name: "小程序服务通知" },
        { id: "3", name: "短信" },
        { id: "4", name: "微信公众号" },
        { id: "5", name: "电话" },
        { id: "6", name: "飞书" },
      ],
      id: "",
    };
  },
  mounted() {
    // 获取数据并更新表格
    this.getList();
  },
  methods: {
    async getList() {
      let res = await reqMessageRulesList({
        page: this.currentPage + "",
        page_size: this.pageSize + "",
      });
      if (res.code === 10000) {
        this.tableData = res.data.data || [];
        if (this.tableData.length > 6) {
          //一排操作栏
          this.maxheight = document.documentElement.clientHeight - 225;
        } else {
          this.maxheight = "auto";
        }
        this.currentPage = res.data.pagination.page * 1;
        this.pageSize = res.data.pagination.page_size * 1;
        this.total = res.data.pagination.total * 1;
      }
    },
    showAddDialog() {
      this.drawerType = "0";
      this.drawerVisible = true;
    },
    closeDialog() {
      this.drawerVisible = false;
    },
    showEditDialog(row) {
      this.id = row.id;
      this.drawerType = "1";
      this.drawerVisible = true;
    },
    showDetailDialog(row) {
      this.id = row.id;
      this.drawerType = "2";
      this.drawerVisible = true;
    },
    handleCurrentChange(page) {
      // 获取数据
      this.currentPage = page;
      this.getList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
  },
};
</script>

<style lang="less" scoped>
.messageContainer {
  padding: 10px 15px;
  background-color: #fff;
  // height: 80vh;
  .operation {
    height: 40px;
    .el-button {
      margin-left: 0px;
      margin-right: 10px;
    }
    ::v-deep .el-pagination {
      float: right;
      margin: 0px 0px 0px 20px;
      .el-input--mini .el-input__inner {
        height: 24px;
      }
    }
  }
}
</style>
